<template>
	<view @touchstart="startAnimate" @touchend="endAnimate" @mousedown="startAnimate" @mouseup="endAnimate" @mouseleave="endAnimate"
	 class="floating-cantainer">
		<view :class="{ 'touchStyle' : touching }" class="floaging-mask">
			<view>
				<slot></slot>

			</view>
</template>

<script>
	export default {
		name: "floating-container",
		data() {
			return {
				touching: false,
				timing: null,
				animating: false,
				mousedown: false
			}
		},
		methods: {
			startAnimate: function() {
				this.touching = true
				this.animating = true
				this.mousedown = true
				this.timing = setTimeout(() => {
					this.animating = false
					if (this.mousedown) return
					this.touching = false
					clearTimeout(this.timing)
				}, 300)
			},
			endAnimate: function() {
				this.mousedown = false
				if (this.animating) return
				this.touching = false
				clearTimeout(this.timing)
			}
		}
	}
</script>

<style>
	.floating-cantainer {
		height: 100%;
		width: 100%;
	}

	.floaging-mask {
		position: absolute;
		height: 100%;
		width: 100%;
		border-radius: 50%;
		background: #FFF;
		opacity: 0;
		transition: all .3s;
	}

	.touchStyle {
		opacity: .2 !important;
	}
</style>
